<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-sm6 layui-col-md2" style="width: 25%">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">今日新增用户数</span>
          <span class="layui-badge layui-bg-blue layuiadmin-badge">人员</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;">
            <i  class="layui-icon iconfont layui-extend-xinzengyonghu"
                    style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
            ></i><span style="margin-left: 70px;color: #05aaaa;">0</span>
          </p>
          <p>
            <span style="float:right;color: #05aaaa;">人</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2" style="width: 25%">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">本周新增用户数</span>
          <span class="layui-badge layui-bg-cyan layuiadmin-badge">人员</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  class="layui-icon iconfont layui-extend-xinzengyonghu"
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
          </i><span style="margin-left: 70px;color: #05aaaa;">0</span>
          </p>
          <p>
            <span style="float:right;color: #05aaaa;">人</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2" style="width: 25%">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">本月新增用户数</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">人员</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  class="layui-icon iconfont layui-extend-xinzengyonghu"
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;">

          </i><span
                  style="margin-left: 70px;color: #05aaaa;">0</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">人</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2" style="width: 25%">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">总用户数</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">人员</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  class="layui-icon iconfont layui-extend-zongyonghushu"
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
          >
          </i><span
                  style="margin-left: 70px;color: #05aaaa;">0</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">人</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2" style="width: 25%">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">今日收入</span>
          <span class="layui-badge layui-bg-green layuiadmin-badge">金额</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  class="layui-icon iconfont layui-extend-jinrishouru"
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
          </i><span style="margin-left: 70px;color: #05aaaa;">0.00</span>
          </p>
          <p>
            <span style="float:right;color: #05aaaa;">元</span>
          </p>
        </div>
      </div>
    </div>

    <div class="layui-col-sm6 layui-col-md2" style="width: 25%">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">本周收入</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">金额</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  class="layui-icon iconfont layui-extend-tubiaoxiajiangqushi-"
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
          >
          </i><span
                  style="margin-left: 70px;color: #05aaaa;">0.00</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">元</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2" style="width: 25%">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">本月收入</span>
          <span class="layui-badge layui-bg-green layuiadmin-badge">金额</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  class="layui-icon iconfont layui-extend-benyueshouru"
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
          </i><span style="margin-left: 70px;color: #05aaaa;">0.00</span>
          </p>
          <p>
            <span style="float:right;color: #05aaaa;">元</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2" style="width: 25%">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">总进账</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">金额</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  class="layui-icon iconfont layui-extend-zongshouru"

                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
          >
          </i><span
                  style="margin-left: 70px;color: #05aaaa;">0.00</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">元</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6">
      <div class="layui-card">
        <div class="layui-card-header">用户增长走势图(单位:天)</div>
        <button class="layui-btn" style="width: 10%;margin-left: 15px">月</button>
        <button class="layui-btn" style="width: 10%">季度</button>
        <button class="layui-btn" style="width: 10%">半年</button>
        <button class="layui-btn" style="width: 10%">年</button>
        <button class="layui-btn" style="width: 10%">总计</button>
        <div class="layui-card-body">
          <table class="layui-table" lay-skin="line">
            <tbody>
            <tr>
              <td>
                <div id="container" style="width:100%; height:300px"></div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6">
      <div class="layui-card">
        <div class="layui-card-header">收入增长走势图(单位:天)</div>
        <button class="layui-btn" style="width: 10%;margin-left: 15px">月</button>
        <button class="layui-btn" style="width: 10%">季度</button>
        <button class="layui-btn" style="width: 10%">半年</button>
        <button class="layui-btn" style="width: 10%">年</button>
        <button class="layui-btn" style="width: 10%">总计</button>
        <div class="layui-card-body">
          <table class="layui-table" lay-skin="line">
            <tbody>
            <tr>
              <td>
                <div id="container1" style="width:100%; height:300px"></div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2" style="width: 100%">
      <div class="layui-card">
        <div class="layui-card-header">各省份销售额</div>
        <div class="layui-card-body">
          <table class="layui-table" lay-skin="line">
            <tbody>
            <tr>
              <td>
                <div id="container2" style="width:100%; height:300px"></div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>


  </div>
</div>
<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
  //用户增长走势图
  //天
  var dayDate=['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
  var dom = document.getElementById("container");
  var myChart = echarts.init(dom);
  var
  option=null;
  option = {
    // title: {
    //   text: 'Beijing AQI'
    // },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      data: dayDate
    },
    yAxis: {
      splitLine: {
        show: false
      }
    },
    toolbox: {
      left: 'center',
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    dataZoom: [{
      startValue: '2014-06-01'
    }, {
      type: 'inside'
    }],
    visualMap: {
      top: 10,
      right: 30,
      pieces: [{
        gt: 200,
        lte: 300,
        color: '#660099'
      }, {
        gt: 300,
        color: '#7e0023'
      }],
      outOfRange: {
        color: '#999'
      }
    },
    series: {
      name: 'Beijing AQI',
      type: 'line',
      data: ['0','0','0','0','0','0','0','0','0','0','0','0'],
      markLine: {
        silent: true,
        data: [{
          yAxis: 50
        }, {
          yAxis: 100
        }, {
          yAxis: 150
        }, {
          yAxis: 200
        }, {
          yAxis: 300
        }]
      }
    }
  }
  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }
  //收入增长走势图
  var dom = document.getElementById("container1");
  var myChart = echarts.init(dom);
  option=null;
  option = {
    // title: {
    //   text: 'Beijing AQI'
    // },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      data: dayDate
    },
    yAxis: {
      splitLine: {
        show: false
      }
    },
    toolbox: {
      left: 'center',
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    dataZoom: [{
      startValue: '2014-06-01'
    }, {
      type: 'inside'
    }],
    visualMap: {
      top: 10,
      right: 10,
      pieces: [{
        gt: 200,
        lte: 300,
        color: '#660099'
      }, {
        gt: 300,
        color: '#7e0023'
      }],
      outOfRange: {
        color: '#999'
      }
    },
    series: {
      name: 'Beijing AQI',
      type: 'line',
      data: ['0','0','0','0','0','0','0','0','0','0','0','0'],
      markLine: {
        silent: true,
        data: [{
          yAxis: 50
        }, {
          yAxis: 100
        }, {
          yAxis: 150
        }, {
          yAxis: 200
        }, {
          yAxis: 300
        }]
      }
    }
  }
  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }

  var dom = document.getElementById("container2");
  var myChart = echarts.init(dom);
  option=null;
  option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['河北', '山西', '辽宁', '吉林', '黑龙江', '江苏','浙江','安徽','福建','江西','山东','河南'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        barWidth: '60%',
        data: [0, 0, 0, 0, 0, 0, 0,0,0,0,0,0,0]
      }
    ]
  };
  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }

</script>
</body>
</html>